<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <!-- 按钮组件 -->
                <div class="btn">
                    <div class="inp">
                        <el-input placeholder="请输入管理ID" clearable v-model="input" />
                    </div>
                    <el-button type="primary" :icon="Search" @click="search">查找</el-button>
                </div>
                <!-- 表格组件 -->
                <div class="tab">
                    <el-table :data="logsData" style="width: 100%" border>
                        <el-table-column prop="id" label="日志ID" />
                        <el-table-column prop="adminId" label="管理员ID" />
                        <el-table-column prop="requestId" label="请求ID" />
                        <el-table-column prop="group" label="API分组" />
                        <el-table-column prop="method" label="API方法" />
                        <el-table-column prop="gmtCreate" label="操作时间" />
                    </el-table>
                </div>
                <!-- 分页组件 -->
                <Pagination @page-change="handlePagehange" v-bind="datas" />
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>

import type { logs } from '@/type/params'//引入类型
import { ref, onMounted, nextTick, watch, computed } from 'vue'//引入响应式，生命周期
import { Search } from '@element-plus/icons-vue'//引入图标
import { get } from '@/untils/request'//引入请求方式
import Pagination from '@/components/Pagination.vue' //引入分页组件
import { friendlyDates } from '@/time/friendlTime'//引入友好日期

const logsData = ref([])//日志管理列表
const datas = ref<logs>({//渲染页面数据
    total: 0,
    page: 1,//当前页面
    limit: 10,//一页面所显示的条数
    targetAdminId: '',//搜索框关键词
    _gp: 'admin.log',
    _mt: 'list',
})
const input = ref('')//搜索框


//生命周期---挂载后
onMounted(() => {
    init()
})
const init = (): void => {//渲染列表
    get(datas.value).then(res => {
        let { items } = res.data
        let { data } = res
        logsData.value = items//赋值
        logsData.value.map((item: any) => {//映射显示友好日期
            item.gmtCreate = friendlyDates(item.gmtCreate)
            return item
        })
        datas.value.total = data.total
    }).catch(err => {
        console.log(err);
    })
};
//搜索
const search = (): void => {
    datas.value.targetAdminId = input.value //赋值给输入框
    init()//刷新
}
//分页
const handlePagehange = (s: { page: number, limit: number }) => {
    datas.value.page = s.page
    datas.value.limit = s.limit
    init()
}
</script>
<style lang="less" scoped>
.el-container {
    font-size: 14px;

    .btn {
        width: 100%;
        display: flex;

        .inp {
            width: 200px;
            margin-right: 15px;
        }
    }

    .btn,
    .tab {
        margin-bottom: 20px;
    }
}
</style>
